<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
</head>

<body class="sticky-header">

<section>
    <%@ include file="/WEB-INF/include/menu.jsp" %>
    <div class="main-content" >

        <div class="header-section">

            <a class="toggle-btn"><i class="fa fa-bars"></i></a>

            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">你有信件 </h5>
                            <ul class="dropdown-list normal-list">
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="${ctxStatic}images/photos/user5.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">读所有</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="${ctxStatic}images/photos/user-avatar.png" alt=""/>
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
        <div class="page-heading">
            <h3>
                查看公告
            </h3>
        </div>

        <div class="wrapper">
            <div class="mail-box">
                <section class="mail-box-info">
                    <header class="header" style="background: #ffffff">
                    </header>

                    <section class="mail-list">
                        <%--此处显示从数据库查询出来的数据展示的地方--%>

                    </section>
                    <div id="demo3">
                        <!--这里显示分页的内容-->
                    </div>
                </section>
            </div>

        </div>
        <%@ include file="/WEB-INF/include/footer.jsp" %>
    </div>
</section>


<%@ include file="/WEB-INF/include/js.jsp" %>

<script type="html" id="template">
    {{#list}}
    <ul class="list-group ">
        <li class="list-group-item">
            <a  href="${ctx}/admin/notify/readflag?id={{id}}">
                <span>{{title}}</span><span class="pull-right">{{createTimeStr}}</span>
            </a>
            <a style="float: right;margin-right: 10px" href="javascript:;">
                 <span class="label label-sm {{readFlagClass}}">{{readFlagTxt}}</span>
            </a>

        </li>
    </ul>
    {{/list}}
</script>
<script>

    function getData(laypage, pageNum, pageSize){
        utils.post({
            url: "${ctx}/admin/notify/selectNotifyByPage",
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (data) {
                if (data.code == 200) {
                    var notifyList = data.data;
                    $.each(notifyList.list, function (index, obj) {
                        $.extend(obj, {
                            readFlagTxt:function(){
                                if(this.readFlag==false){
                                    return '未读';
                                }
                                if(this.readFlag==true){
                                    return '已读';
                                }
                            },
                            readFlagClass:function(){
                                if(this.readFlag==false){
                                    return 'btn-danger';
                                }
                                if(this.readFlag==true){
                                    return 'btn-success';
                                }
                            },
                            createTimeStr:function(){
                                var date = new Date(this.createTime);
                                return date.format("yyyy-MM-dd hh:mm");
                            }
                        });
                    })

                    var template = $('#template').html();
                    var contentHtml = Mustache.render(template, notifyList);
                    $('.mail-list').html(contentHtml);

                    //自定义首页、尾页、上一页、下一页文本
                    laypage.render({
                        elem: 'demo3',
                        curr: pageNum,
                        count:data.data.total,
                        limit:pageSize,
                        theme: '#FF5722',
                        first: '首页',
                        last: '尾页',
                        jump: function(obj, first){
                            if(!first){
                                getData(laypage, obj.curr, obj.limit);
                            }
                        }
                    });
                }
            }
        })
    }

    layui.use('laypage', function() {
        var laypage = layui.laypage;
        getData(laypage, 1, 4);
    });
</script>
</body>
</html>
